<template>
  <div class="blog-info">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="草稿" name="unChecked"></el-tab-pane>
      <el-tab-pane label="已发布" name="chekced"></el-tab-pane>
    </el-tabs>
    <el-card class="box-card">
      <el-table :data="blogs" style="width: 100%" stripe class="table">
        <el-table-column prop="bid" label="编号" width="50" />
        <el-table-column prop="cover" label="封面" width="100">
          <template slot-scope="scope">
            <el-image style="width: 80px; height: 50px" :src="scope.row.cover" :preview-src-list="[scope.row.cover]" 
              fit>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="文章标题" :show-overflow-tooltip="true"/>
        <el-table-column prop="username" label="作者" />
        <el-table-column prop="createTime" label="发布时间" width="200" />
        <el-table-column prop="typeName" label="文章类别">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{ status[scope.row.status].name }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="warning" icon="el-icon-more-outline" circle size="small" @click="goEdit(scope.row.bid)" />
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background small :page-size="form.pageSize" :pager-count="11" layout="prev, pager, next" :total="total"
        class="bottom" @current-change="handleCurrentChange"/>
    </el-card>
  </div>
</template>
 
<script>
import { getMyBlogs } from '@/api/blog';
export default {
  name: 'BlogInfo',
  data() {
    return {
      blogs: [],
      status: [
        { id: 0, name: '未审核' },
        { id: 1, name: '审核不通过' },
        { id: 2, name: '已审核' }
      ],
      form: {
        pageNum: 1,
        pageSize: 5
      },
      activeName: 'all'
    }
  },
  created() {
    this.getMyBlogs()
  },
  methods: {
    async getMyBlogs() {
      const res = await getMyBlogs(this.form)
      if (res.code === 200) {
        const { blogList, total } = res.data
        this.blogs = blogList
        this.total = total
      } else {
        console.log('查询失败')
      }
    },
    handleClick(tab) {
      if (tab.name === 'all') {
        this.form.status = 3
      } else if (tab.name === 'unChecked') {
        this.form.status = 0
      } else if (tab.name === 'checked') {
        this.form.status = 1
      } else {
        this.form.status = 2
      }
      this.getMyBlogs(this.form)
    },
    goEdit(bid) {
      this.$router.push({
        name: 'edit',
        query: {
          bid: bid
        }
      })
    },
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.getMyBlogs()
    }
  }
}
</script>
 
<style lang="less" scoped>
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ff9d00;
  color: #FFF !important;
}

/deep/ .el-pager li:hover {
  color: #ff9d00 !important;
}
/deep/ .el-tabs__active-bar {
  background-color: #c59620;
}

/deep/ .el-tabs__item:hover {
  color: goldenrod;
}

.blog-info {
  width: 1000px;
  margin: 0 auto;


  /deep/ .el-tabs__item.is-active {
    color: goldenrod;
  }

  .el-pagination {
    margin-top: 10px;
  }

  .table {
    min-height: 400px;
  }
}</style>